<!DOCTYPE html>
<html>

<head>
    <meta name="renderer" content="webkit">
    <!-- <meta content="IE=Edge" http-equiv="X-UA-Compatible"> -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>公共卫生网络信息监测系统</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/manage-user.css">
    <link href="../css/sy.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../js/commen.js" type="text/javascript"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/component.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css"/>
    <script src="../js/jquery.datetimepicker.full.js"></script>
</head>

<body id="top">
<div id="app">
    <head-template></head-template>
    <div class="main">
        <div class="cw1200 clearfix">
            <system-menu-template active-menu="0"></system-menu-template>
            <div class="rightside fr w980">
                <div class="kr-item clearfix">
                    <p>时间：</p>
                    <div class="date-box"><input id="datetimepicker" type="text" class="Wdate">
                    </div>
                    <span>到</span>
                    <div class="date-box"><input id="datetimepicker2" type="text" class="Wdate">
                    </div>
                    <a class="statis-sec-btn fl" @click="searchData()">检 索</a>

                    <div class="display-type">
                        <ul>
                            <li class="active" data-id="6">日</li>
                            <li data-id="2">月</li>
                            <li data-id="1">年</li>
                        </ul>
                    </div>
                </div>
                <div class="statis-cont clearfix">
                    <div class="echart1" id="echart1" style="width:980px; height:390px">
                        <table>
                            <tr>
                                <td>
                                    正在加载…
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!--rightside end-->
        </div>
    </div>
    <div class="main footer">
        <p>地址：北京市西城区白广路***********</p>
        <p>电话：010-83******</p>
        <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
    </div>
</div>
<script src="../js/echarts.min.js" type="text/javascript"></script>
<script src="../js/adminecharts.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            queryData: {
                startTime: null,
                endTime: null,
                dateType: 6
            }
        },
        methods: {
            initData() {
                axios.get("/log/statistics", {params: app.queryData}).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        let option = myChart.getOption();
                        myChart.setOption(result);
                    }
                })
            },
            searchData() {
                this.queryData.startTime = $("#datetimepicker").val();
                this.queryData.endTime = $("#datetimepicker2").val();
                this.queryData.dateType = $(".display-type li.active").data("id");
                this.initData();
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                app.initData();
            })
        }
    })
    var myChart = echarts.init(document.getElementById('echart1'));
    var option = {

        title: {
            text: '折线图',
            //subtext: '模拟数据',
            x: 'center'
        },

        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },

        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
        dataZoom: [
            {
                type: "slider",
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 49,
                textStyle: {
                    color: "#ccd7d7"
                }
            },
        ],
        xAxis: {
            name: '周几',
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: '#912CEE'
                }
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
                rotate: 0, // 旋转角度
                interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },

        yAxis: {
            name: '数值',
            type: 'value',
            scale: true,
        },

        series: [
            {
                name: '预期',
                data: [820, 932, 301, 1434, 1290, 1330, 1320],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbolSize: 8
            },

            {
                name: '实际',
                data: [620, 732, 941, 834, 1690, 1030, 920],
                type: 'line',
                // 设置折线上圆点大小
                symbolSize: 8

            },

            {
                name: '假设',
                data: [120, 232, 541, 134, 290, 130, 120],
                type: 'line',
                // 设置折线上圆点大小
                symbolSize: 8

            }
        ],

        color: ['#ac1111', '#11ac1c', '#1140ac']
    };
    myChart.setOption(option);
    var option = myChart.getOption();

    function refreshData() {
        //刷新数据
        var option = myChart.getOption();
        myChart.setOption({
            series: [
                {
                    data: [320, 932, 301, 1434, 1290, 1330, 1320],
                },
                {
                    data: [520, 932, 301, 1434, 1290, 1330, 1320],
                },
                {
                    data: [620, 932, 301, 1434, 1290, 1330, 1320],
                }

            ],
            xAxis: {
                data: ['11Mon', '11Tue', '11Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
        });
    }


    $('#datetimepicker').datetimepicker({
        lang: "ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
        format: "Y-m-d",      //格式化日期
        timepicker: false
    });
    $('#datetimepicker2').datetimepicker({
        lang: "ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
        format: "Y-m-d",      //格式化日期
        timepicker: false
    });

    $(function () {
        $('.display-type ul li').each(function (i) {
            $(this).click(function () {
                $('.display-type ul li').removeClass('active');
                $(this).addClass('active');
            });
        });
    });
</script>
</html>